1 表单配置简述

  1. pagex致力于让大家拜托后端10分钟,前段2小时的烦恼,传统开发中 在表单页中因为需要用到的插件很多,
  2. 所以我们要学习各种插件,由于不是插件不是一家出的,东拼西凑的,不同的插件结合使用又会有很多坑,稍微不注意,
  3. 就会掉坑里,使用pagex 开发表单就是很简单的事情了,我们对所有的插件做了封装,不需要写html或者js代码,一行json就足够了,
  4. 你在也不需要学习每种插件如何使用以及不同的插件之间的兼容问题了,把这些恶心的问题交给写插件的人就可以了。

输入图片说明

2 我们现在支持了哪些插件?

  1. 我们有 普通input,多行文本框,富文本框(baidu um),下拉(下拉tree,下拉列表,多选下拉,使用easyui相关下拉插件开发),字典,滑块,divhidden,password,图片上传,多文件上传,省市区,百度地区抓经纬度。
  2. 以下js是相对来说比较全的插件demo了,缺少部分后期维护上
  3. https://gitee.com/fhs-opensource/fhs-framework/blob/master/fhs_mini_admin/src/main/webapp/pagex/demo/student.js
  4. 插件目录:
  5. https://gitee.com/fhs-opensource/fhs-framework/tree/master/fhs_framework_parent/src/main/java/com/fhs/pagex/tag/form

3 验证框架

  1. 集成了号称一行代码搞定验证的 validform 框架。
  2. 比如要验证一个 字段不能为空 required:true 即可,如果要限制格式可以设置dataType:'n'

Image

  1. 为了方便使用我们还扩展了 | 或者 比如 你有2个校验规则 或者符合A或者符合b 可以 a|b
  2. 上面图片是官网提供的内置正则,dataType也支持直接写正则,另外fhs也对其做了常见扩展:
  3. double2保留2位小数的数字,phone 座机,empty 空,ipv4ipv6idNumber 身份证号码。

4 回调方法

  1. document ready,加载后台数据,用户点击提交表单,提交成功,失败 等等情况的时候,系统提供的回调方法方便处理业务。
序号 回到方法名称 解释
1 ready document.ready
2 loadSuccess 查看或者修改页面,加载详情数据成功后触发
3 onSave 保存的时候触发,return false的话将不会提交表单
4 saveSucess 保存成功
5 saveError 保存失败
6 getConflictMsg 如果后台有唯一键约束报错,给用户提示什么
7

配置项名称:add.otherFunctions,下面是demo

输入图片说明

  1. getConflictMsg 的使用:
  2. 在表里面设置唯一键约束,如果违反了唯一键约束后台就会报错,给前段返回唯一键约束错误码(409 这个时候会就提示getConflictMsg返回的字符串

5 自定义更新和添加的后台接口

  1. 在添加 key:saveUrl,updateUrl,infoUrl 即可修改默认的保存,更新,详情json url
  2. addupate url需要返回HttpResult<Boolean>
  3. info 需要返回所查看/修改的那条数据的 json即可。

6 使用html扩展pagex表单

Image

  1. 只需要在js同目录中添加一个 namespace.html即可
  2. html内容会拼接到表单的最下面,如果你不想把html内容放到最下面,在pagex表单中添加一个div,然后使用jquery修改div中的html
  3. 这里的html会使用beetl 引擎渲染,故可使用beetl的相关语法。